<template>
    <div class="system-files-label">
        <div>
            <el-icon>
                <component :is="icon"/>
            </el-icon>
        </div>
        <div style="margin-left: 2px">
            {{ file.fileName }}
        </div>
    </div>
</template>

<script setup lang="ts">

import {onMounted, ref} from "vue";
import {useLeftToolStore} from "../../store/leftTool";
import {useRouter} from "vue-router";
import {type} from "../../model/type";
import {AllIcons} from "../../icons";


const tool = useLeftToolStore()
const router = useRouter()

const props = defineProps({
    file: type.File
})

const icon = ref('')
const path = ref('')
const root = ref('')

onMounted(() => {
    if (props.file!.fileType === undefined) {
        icon.value = 'SystemFolderIcon'
        return
    }
    let type = props.file!.fileType
    icon.value = AllIcons.FileIconMapping.get(type)!
})

/*export default {
    name: "SelectFileLabel",
    props: {
        file: {
            type: Object,
            default: {
                fileName: 'default name',
            }
        }
    },
    data() {
        return {
            icon: '',
            path: '',
            root: ''
        }
    },
    computed: {
        ...mapState('leftToolBar', ['ctx', 'leftWidth']),
    },
    methods: {
        openEditor() {
            if (this.file.fileType !== 0) {
                this.$router.push(this.path)
                let win = {
                    path: this.path,
                    title: this.file.fileName,
                    windowType:this.file.fileType,
                    check: true}
                this.UpdateWindow(win)
            }
        },
        ...mapActions('windows', ['UpdateWindow']),
        ...mapActions('route', ['AddRouteCache'])
    },
    mounted() {
        if (this.file.fileType === undefined) {
            this.icon = 'SystemFolderIcon'
            return
        }
        let type = this.file.fileType
        this.icon = FileTypeIcons[type]
    }
}*/
</script>

<style scoped>

</style>